import React from "react";

import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { Layout, Button, theme, Space } from "antd";

import { useSelector, useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";

const { Header } = Layout;

const MyHeader = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  // collapsed是用来控制左边的菜单是否展开的
  // const [collapsed, setCollapsed] = useState(false);

  const collapsed = useSelector((state) => state.collapsed);
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const exit = () => {
    localStorage.clear();
    navigate("/login");
  };

  return (
    <Header
      style={{
        padding: 0,
        background: colorBgContainer,
        display: "flex",
        justifyContent: "space-between",
      }}
    >
      <Button
        type="text"
        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={() => dispatch({ type: "collapsedChange" })}
        style={{
          fontSize: "16px",
          width: 64,
          height: 64,
        }}
      />
      <Space style={{ marginRight: 20 }}>
        <span>欢迎你，{localStorage.getItem("adminname")}</span>
        <Button onClick={exit}>退出</Button>
      </Space>
    </Header>
  );
};

export default MyHeader;
